<div
  [@messageWrapper]="animationState"
  (@messageWrapper.done)="onAnimationDone($event)"
  class="lv-message"
  (mouseenter)="mouseEnter()"
  (mouseleave)="mouseLeave()"
>
  <div
    class="lv-message-wrapper"
    [ngClass]="{
      'lv-message-wrapper-simple': lvOptions.isSimple,
      'lv-message-success': options.lvType === 'success',
      'lv-message-error': options.lvType === 'error',
      'lv-message-warning': options.lvType === 'warning',
      'lv-message-information': options.lvType === 'info'
    }"
    [@messageContent]
  >
    <ng-container *ngIf="!lvOptions.isSimple">
      <div class="lv-message-title">
        <i *ngIf="options.lvType && options.lvType !== 'default' && options.lvShowIcon" [lv-icon]="icons[options.lvType]"></i>
        <span>{{ options.lvTitle }}</span>
      </div>
    </ng-container>
    <ng-container *ngIf="lvOptions.isSimple">
      <div class="lv-message-icon" *ngIf="options.lvType && options.lvType !== 'default' && options.lvShowIcon">
        <i [lv-icon]="icons[options.lvType]"></i>
      </div>
    </ng-container>
    <div
      class="lv-message-content"
      [ngClass]="{
        'lv-message-content-indent': !lvOptions.isSimple && options.lvType && options.lvType !== 'default' && options.lvShowIcon
      }"
      [style.width]="contentWidth"
      [style.maxWidth]="contentMaxWidth"
      [style.minWidth]="contentMinWidth"
    >
      <ng-container *ngIf="typeUtils.isRealString(options.lvContent)">
        <div *ngIf="options.lvRenderType == 'html'" [innerHTML]="options.lvContent | safe: 'html'"></div>
        <div *ngIf="options.lvRenderType == 'text'">{{ options.lvContent }}</div>
      </ng-container>
      <ng-container *ngIf="typeUtils.isTemplateRef(options.lvContent)" [ngTemplateOutlet]="options.lvContent" [ngTemplateOutletContext]="{ $implicit: options.lvContextData }"></ng-container>
    </div>
    <div *ngIf="options.lvDuration === 0 || options.lvShowCloseButton" class="lv-message-close-button">
      <i lv-icon="lv-icon-close" lvColorState (click)="close()"></i>
    </div>
  </div>
</div>
